<template>
  <div id="contsainer"></div>
</template>
<script>
// import uri from './images/Cesium_Air.glb'
// import 'cesium/Widgets/widgets.css'
export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    this.addModel(this.viewer)
  },
  methods: {
    initCesium() {
      Cesium.Ion.defaultAccessToken =
        'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkZjg4ZjljZC1mZGM3LTRlZjEtYjg3MC00MjZkNGU3YjI5ZWUiLCJpZCI6MTU5NTIsImlhdCI6MTYwNTE0ODM5OX0.LjxeKrgAo7Ksk8405kSAhYwF0nKcF2w2DGJnKHh51N8'
      this.viewer = new Cesium.Viewer('contsainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: true,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: true, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addModel(viewer) {
      let position = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 10000)
      let heading = Cesium.Math.toRadians(-135)
      let pitch = 0
      let roll = 0
      let hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
      let orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)
      let entity = viewer.entities.add({
        name: 'model',
        position: position,
        orientation: orientation,
        model: {
          uri: 'http://localhost:8888/model/SampleData/models/CesiumAir/Cesium_Air.glb',
          // 模型最小刻度
          scale: 5, //缩放
          minimumPixelSize: 32, //指定模型的最小最小像素大小，而不考虑缩放
          maximumSize: 128, //模型的最大比例尺大小。 minimumPixelSize的上限
          runAnimations: true, //指定是否应启动模型中指定的glTF动画
          clampAnimations: true, //指定glTF动画是否应在没有关键帧的持续时间内保持最后一个姿势
          silhouetteColor: Cesium.Color.fromAlpha(Cesium.Color.BLUE, 1), // 模型轮廓颜色与透明度
          silhouetteSize: 3, //模型轮廓大小
          maximumScale: 200, // 设置模型最大放大大小
          color: Cesium.Color.YELLOWGREEN, // 指定与模型的渲染颜色混合的 Color
          show: true, // 模型是否可见
          colorBlendMode: Cesium.ColorBlendMode.MIX, //颜色混合模式
          colorBlendAmount: 0.6 //颜色混合比例
        }
      })
      viewer.trackedEntity = entity
    }
  }
}
</script>
<style scoped>
#contsainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
